
<template>
    <div class="marketing-tow">
        <div class="but-box" v-if="page_i != 3">
            <i class="el-icon-plus" @click="addData"></i>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="进行中" name="2">
                <marketingList
                    ref="marketingList"
                    :selectForm="selectForm2"
                    :list_data="list_data2"
                    :optionData="optionData"
                    :activeName="activeName"
                    @loadFun="loadFun"
                    @getDetailsList="getDetailsList"
                    @changeList="changeList"
                ></marketingList>
            </el-tab-pane>
            <el-tab-pane label="未开始" name="1">
                <marketingList
                    ref="marketingList"
                    :selectForm="selectForm1"
                    :list_data="list_data1"
                    :optionData="optionData"
                    :activeName="activeName"
                    @loadFun="loadFun"
                    @getDetailsList="getDetailsList"
                    @changeList="changeList"
                ></marketingList
            ></el-tab-pane>
            <el-tab-pane label="已失效" name="3">
                <marketingList
                    ref="marketingList"
                    :selectForm="selectForm3"
                    :list_data="list_data3"
                    :optionData="optionData"
                    :activeName="activeName"
                    @loadFun="loadFun"
                    @getDetailsList="getDetailsList"
                    @changeList="changeList"
                ></marketingList
            ></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import marketingList from "./marketingList.vue";
import config from "@/js/conf/Config.js";

export default {
    props: ["page_i"],
    components: { marketingList },
    data() {
        return {
            activeName: "2",
            is_soll1: false,
            is_soll2: false,
            is_soll3: false,
            selectForm1: {
                pfrom: 0,
                pnum: 20,
                shopid_yd: "0",
                time: "0",
                st: "2",
                stime: "",
                dtime: "",
            },
            selectForm2: {
                pfrom: 0,
                pnum: 20,
                shopid_yd: "0",
                time: "0",
                st: "2",
                stime: "",
                dtime: "",
            },
            selectForm3: {
                pfrom: 0,
                pnum: 20,
                shopid_yd: "0",
                time: "0",
                st: "2",
                stime: "",
                dtime: "",
            },
            list_data1: [],
            list_data2: [],
            list_data3: [],
            optionData: {
                time_data: [
                    {
                        id: "0",
                        name: "全部日期",
                    },
                    {
                        id: "1",
                        name: "今日",
                    },
                    {
                        id: "2",
                        name: "本月",
                    },
                    {
                        id: "3",
                        name: "本季",
                    },
                    {
                        id: "4",
                        name: "本年",
                    },
                    {
                        id: "5",
                        name: "自定义",
                    },
                ],
                yd_data: [],
            },
        };
    },
    methods: {
        initData() {
            this.getlistFun();
            this.getYdlistFun();
        },
        // 新增拼团优惠
        addData() {
            this.$emit("addDara");
        },
        // 筛选
        changeList() {
            this.emptyData();
            this.getlistFun();
        },
        // 切换tab
        handleClick() {
            const val = this.activeName;
            if (this[`list_data${val}`].length == 0) {
                this[`selectForm${val}`].st = val;
                this.getlistFun();
            }
        },
        // 获取详情列表
        getDetailsList(item) {
            const val = this.activeName;
            if (val == 1) {
            } else {
                this[`list_data${val}`].map((v) => {
                    if (v.id == item.id) {
                        v.is_acitve = true;
                    } else {
                        v.is_acitve = false;
                    }
                });
                for (let i = 1; i < 4; i++) {
                    if (i != val) {
                        this[`list_data${i}`].map((v) => {
                            if (v.is_acitve) {
                                v.is_acitve = false;
                            }
                        });
                    }
                }
                this.$emit("getDetailsList", item);
            }
        },
        // 滚动刷新
        loadFun() {
            const val = this.activeName;
            if (this[`is_soll${val}`]) return;
            this[`selectForm${val}`].pfrom += 20;
            this.getlistFun();
        },
        // 获取列表
        async getlistFun() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.YX_PIN_EVENT_LS;
            let param = this[`selectForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                if (this[`list_data${val}`].length == 0 && val == 2) {
                    res.data.ls.map((v, i) => {
                        if (i == 0) {
                            v.is_acitve = true;
                        } else {
                            v.is_acitve = false;
                        }
                    });
                    this.$emit("getDetailsList", res.data.ls[0]);
                } else {
                    res.data.ls.map((v, i) => {
                        v.is_acitve = false;
                    });
                }
                this[`list_data${val}`] = this[`list_data${val}`].concat(
                    res.data.ls
                );
                setTimeout(() => {
                    this[`is_soll${val}`] = false;
                }, 200);
            } else {
                this[`is_soll${val}`] = true;
            }
        },
        // 获取云店列表
        async getYdlistFun() {
            let url = config.YUN_SHOP_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                res.data.unshift({
                    id: "0",
                    name: "全部云店",
                });
                this.optionData.yd_data = res.data;
            }
        },
        // 清空数据
        emptyData() {
            const val = this.activeName;
            this[`selectForm${val}`].pfrom = 0;
            this[`list_data${val}`] = [];
            this[`is_soll${val}`] = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.marketing-tow {
    // margin-left: 72px;
    box-sizing: border-box;
    width: 25%;
    border-right: 1px solid #ececec;
    padding: 10px;
    position: relative;
    .but-box {
        position: absolute;
        right: 10px;
        top: 14px;
        z-index: 9999;
        i {
            font-size: 26px;
            cursor: pointer;
        }
    }
    .content-box {
    }
}
</style>